<style>
  .tab-content .active {
    display: block;
  }
</style>
<style type="text/css">
  form.tab-form-demo .tab-pane {
    margin: 20px 20px;
  }
</style>

<!-- 信息开始 -->
<div class="row" id="serviceDetail">

  <div class="col-md-12">
    <div class="tab-form-demo">
      <uib-tabset active="activeForm">
        <uib-tab index="0" heading="总览" ng-click="addClick(0)">
          <div class="nav_side col-xs-2 col-md-2">
            <ul class="">
              <li class=""><a href="#home-3" class="active " ng-click="addActive(0)">基本信息</a></li>
              <li class=""><a href="#profile-3" ng-click="addActive(1)">访问方式</a></li>
              <li class=""><a href="#messages-3" ng-click="addActive(2)">环境变量</a></li>
              <li ><a href="#settings-3" ng-click="addActive(3)">卷</a></li>
              <li class="side_line" style="position: absolute"></li>
            </ul>

          </div>
          <div class="nav_content col-xs-10 col-md-10">
            <div id="home-3" class="tab-pane active hover_animate">

              <div class="instancename ng-scope">
                <!--服务开始-->
                <div class="nav_name clearfix"><span>基本信息</span></div>
                <div class="info_content clearfix ">
                  <div class="info_img_home">
                    <img src="static/cp/images/18BEE3B2.png" alt="">
                  </div>
                  <div class="info_word col-sm-9 col-xs-9">

                    <div class="invoice-bill-info">
                      <address style="font-size: 26px;margin-bottom: 5px">
                        <span style="text-overflow: ellipsis;
    white-space: nowrap;
    overflow:hidden;
    display: block;">{{svc.app}}</span>

                      </address>
                    </div>
                    <div class="invoice-bill-info">
                      <address>
                        <p class="col-md-5 col-sm-8 col-xs-8" style="padding: 0">
                          <i class="iconfont icon-jingxiang"></i>
                          <b>镜像：</b> {{svc.image}}:{{svc.imageversion}}
                        </p>
                        <p class="col-md-3 col-sm-4 col-xs-4">
                          <i class="iconfont icon-shiliguanli"></i>
                          <b>实例数：</b><span class="color_blue">{{svc.dbJson.rcnum}}</span>

                        </p>
                        <p class="col-md-4 col-sm-8 col-xs-8" style="padding: 0">
                          <i class="iconfont icon-cpu"></i>
                          <b>CPU/内存：</b><span ng-show="svc.limit.cpu!==undefined">{{svc.limit.cpu}}Core  {{svc.limit.memory.replace("Mi", "M")}} </span>
                        </p>

                        <!--<div class="clearfix"></div>-->
                      </address>
                    </div>

                  </div>

                </div>

                <!--服务结束-->
              </div>

            </div>
            <div id="profile-3" class="tab-pane instancename ng-scope hover_animate">
              <!--服务端口开始-->
              <div class="nav_name clearfix"><span>访问方式</span></div>
              <div class="info_content clearfix">
                <table class="table none-border">
                  <thead>
                  <tr>
                    <th width="20%">容器端口</th>
                    <th width="20%">访问协议</th>
                    <th width="20%">是否外部访问</th>
                    <th width="40%">外部访问地址</th>

                  </tr>
                  </thead>

                  <tbody>
                  <tr ng-repeat="port in ports">
                    <td width="20%">{{port.targetPort}}</td>
                    <td width="20%">{{port.accessProtocol}}</td>
                    <td width="20%">{{port.isPublic ? '是' : '否'}}</td>
                    <td width="40%" style="color:#67aaf5">
                      {{port.address.split(',').length>2?(port.address.substr(0,(port.address.split(',')[0].length+port.address.split(',')[1].length+1))+"..."):port.address}}
                      <md-tooltip>
                        {{port.address}}
                      </md-tooltip>
                    </td>

                  </tr>
                  </tbody>
                </table>
              </div>


            </div>
            <!--服务端口结束-->
            <div id="messages-3" class="tab-pane instancename ng-scope hover_animate">
              <!--环境变量开始-->
              <div class="nav_name  clearfix"><span>环境变量</span></div>
              <div class="info_content  clearfix">
                <table class="table none-border precent80 ">
                  <thead>
                  <tr>
                    <th style="width: 50%">名称</th>
                    <th style="width: 50%">值</th>
                  </tr>
                  </thead>

                  <tbody>
                  <tr ng-repeat="envInfo in env">
                    <td style="width: 50%">{{envInfo.name}}</td>
                    <td style="width: 50%">{{envInfo.value}}</td>
                  </tr>
                  </tbody>
                </table>
              </div>

              <!--环境变量结束-->
            </div>

            <div id="settings-3" class="hover_animate">
              <!--卷开始-->
              <div class="nav_name clearfix"><span>卷</span></div>
              <div class="info_content clearfix">
                <table style="width: 100%">
                  <thead>
                  <tr>
                    <th style="width: 50%;">挂载路径</th>
                    <th style="width: 50%;">卷名称</th>
                  </tr>
                  </thead>

                  <tbody>
                  <tr ng-repeat="volume in volumes">
                    <td style="width: 50%"><span style="width: 80%;text-overflow: ellipsis;
    white-space: nowrap;
    overflow:hidden;
    display: block;"title="">{{volume.mountTargetPath}}</span></td>
                    <td style="width: 50%"><span style="width: 80%;text-overflow: ellipsis;
    white-space: nowrap;
    overflow:hidden;
    display: block;"title="">{{volume.volumeIds}}</span></td>
                  </tr>
                  </tbody>
                </table>
              </div>

            </div>
            <!--卷结束-->
          </div>

        </uib-tab>
        <uib-tab id="test1" index="1" heading="日志" ng-click="addClick(1)" ng-hide="noPod">

          <div ng-controller="InstanceLogsController"
               ng-include="'template/cp/serviceLogsTab.html'"></div>


        </uib-tab>
        <uib-tab index="2" heading="控制台" ng-click="addClick(2)" ng-hide="noPod">
          <div class="tab-pane scrollable" id="console" data-max-height="300"
               ng-controller="InstanceConsoleController"
               ng-include="'template/cp/serviceConsoleTab.html'" style="width: 100%;"></div>
        </uib-tab>
        <uib-tab index="3" heading="监控" ng-click="addClick(3)" ng-hide="noPod">
          <div class="tab-pane scrollable"
               ng-controller="InstanceMonitorController"
               ng-include="'template/cp/serviceMonitorTab.html'"></div>
        </uib-tab>
      </uib-tabset>
      <div class="instanceSelect">
        <md-select placeholder="请选择实例" ng-model="curPod" style="min-width: 200px;" ng-hide="noPod">
          <md-option ng-value="curPod" ng-repeat="curPod in projects">{{curPod.metadata.name}}</md-option>
        </md-select>

        </div>

      <div class="nav_line"></div>
    </div>


  </div>


</div>


<!-- 信息结束-->
<!--
<div class="panel-group panel-group-joined" id="accordion-test" ng-controller="ServiceInstanceController">

  <div class="panel panel-default" ng-repeat="st in pods">
    <div class="panel-heading instance_header">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion-test" href="#{{$index}}"
           ng-click="loadlog?setItem(st):getlog($index,st)" class="collapsed">
          <span><i class="fa-file-text-o"></i> {{st.replicasname}}</span> <em><i class="fa-play-circle-o "></i>
          {{st.phase}}&nbsp; <em style="color:red;"> {{st.reason=="ImagePullBackOff"?"检查镜像是否上传":""}} </em>&nbsp;<i
              class="fa-laptop "></i> {{svc.port}}:{{svc.protocol}}</em>
        </a>
      </h4>
    </div>
    <div id="{{$index}}" class="panel-collapse collapse">
      <div class="panel-body">

        &lt;!&ndash;开始&ndash;&gt;

        <div class="tabs-vertical-env tabs-main">

          <ul class="nav tabs-vertical">
            <li class="active"><a href="#log-{{$index}}" ng-click="getlog($index,st)" data-toggle="tab">日志</a></li>
            <li><a href="#console-{{$index}}" ng-click="getConsole($index,st)" data-toggle="tab">控制台</a></li>
            <li><a href="#historystatus-{{$index}}" ng-click="getHistoryStatus($index,st)"
                   data-toggle="tab">历史状态</a></li>
            &lt;!&ndash;monitor &ndash;&gt;
            <li><a href="#monitor-{{$index}}" ng-click="getMonitor($index,st)" data-toggle="tab">监控</a></li>

          </ul>

          <div class="tab-content ">

            <div class="tab-pane scrollable active" id="log-{{$index}}" data-max-height="300"
                 ng-controller="InstanceLogsController" ng-init="init($index)"
                 ng-include="'template/cp/serviceLogsTab.html'"></div>
            <div class="tab-pane scrollable" id="console-{{$index}}" data-max-height="300"
                 ng-controller="InstanceConsoleController" ng-init="init($index)"
                 ng-include="'template/cp/serviceConsoleTab.html'"></div>
            <div class="tab-pane scrollable" id="historystatus-{{$index}}" data-max-height="300">
              <div class="tab-pane scrollable active" data-max-height="300">
                <div>
                  <pre>{{tabs.historyStatus}}</pre>
                  &lt;!&ndash;  <span ng-repeat=" line in tabs.historyStatus track by $index">
{{line}}<br>
                    </span>&ndash;&gt;
                </div>
              </div>
            </div>
            &lt;!&ndash;monitor &ndash;&gt;
            <div class="tab-pane scrollable" id="monitor-{{$index}}" data-max-height="500"
                 ng-controller="InstanceMonitorController" ng-init="init($index)"
                 ng-include="'template/cp/serviceMonitorTab.html'"></div>

          </div>


        </div>

        &lt;!&ndash;结束&ndash;&gt;

      </div>
    </div>
  </div>

</div>-->


	
